<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>

	$(function() {
		$("#accordion").accordion();
	});
	
	function doSubmit(frm) {
		if (frm.password.value != frm.re_password.value) {
			alert("비밀번호를 확인해주세요.");
			return false;
		}

		frm.submit();
	}
</script>

<style type="text/css">
body {
	background-image: url('img/login.jpg');
	background-repeat: no-repeat;
}

[form:input],
input[type=submit] {
    line-height: 14px;
    margin: 10px 0;
    padding: 6px 15px;
    border: 0;
    outline: none;
 
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0px 1px 1px rgba(255,255,255, .2);
 
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
 
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

[form:input]:hover {
    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
}

[form:input]:focus {
    background: #e1e1e1;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e1e1e1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
}

input[type=submit] {
    float: right;
    cursor: pointer;
 
    color: #445b0f;
 
    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
}

input[type=submit]:hover {
    -webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
    -moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
    box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
}
 
input[type=submit]:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

</style>
<center>
	<form:form commandName="memberInfo">
		<div id="accordion" style="width: 600px">
			<h4>기본정보</h4>
			<div>
				<table>
					<tr>
						<td><spring:message code="label.username" /></td>
						<td><form:input path="username" placeholder="username" /></td>
						<td><form:errors path="username" /></td>
					</tr>
					<tr>
						<td><spring:message code="label.password" /></td>
						<td><form:input path="password" type="password" placeholder="password" /></td>
						<td><form:errors path="password" /></td>
					</tr>
					<tr>
						<td><spring:message code="label.re_password" /></td>
						<td><input type="password" name="re_password" /></td>
						<td></td>
					</tr>
				</table>
			</div>
			<h4>상세정보</h4>
			<div>
				<table>
					<tr>
						<td>이름</td>
						<td><form:input path="name" placeholder="name" /></td>
						<td><form:errors path="name" /></td>
					</tr>
					<tr>
						<td><spring:message code="label.email" /></td>
						<td><form:input path="email" placeholder="email" alt="아이디와 다를때 입력해주세요" /></td>
						<td><form:errors path="email" /></td>
					</tr>
					<tr>
						<td>전화번호</td>
						<td><form:input path="phone" placeholder="phone" /></td>
						<td><form:errors path="phone" /></td>
					</tr>
				</table>
			</div>

		</div>
		<br/>
		<br/>
		<input type="button" value="회원가입" onClick="doSubmit(this.form)"></input>
	</form:form>
</center>